<template>
  <div class="nsw-container">
    <el-carousel
      class="carousel-container"
      indicator-position="outside"
      :height='baseheight + "px"'
    >
      <el-carousel-item
        v-for="item in carouselList"
        :key="item.id"
        :name="item.name"
      >
        <router-link :to="item.linkUrl" v-if="item.linkUrl">
          <img :src="item.cover" :alt="item.name" srcset="" />
        </router-link>
        <img :src="item.cover" :alt="item.name" srcset="" v-else />
      </el-carousel-item>
      <div class="carousel-operation">
        <div class="operation-container">
          <div class="left-menu menu">
            <span class="menu-text"
              >已有<span class="number">521307</span>个企业入住</span
            >
            <i class="el-icon-d-arrow-right"></i>
            <el-button plain class="operation-btn">发布需求</el-button>
          </div>
          <div class="middle-menu menu"></div>
          <div class="right-menu menu">
            <span class="menu-text"
              >已有<span class="number">521307</span>个设计师加盟</span
            >
            <i class="el-icon-d-arrow-right"></i>
            <el-button plain class="operation-btn">接单赚钱</el-button>
          </div>
        </div>
      </div>
    </el-carousel>
  </div>
</template>

<script>
import { listCarousel } from "@/api/crowdsource/carousel";
export default {
  name: "CarouselCom",
  data() {
    return {
      minHeight: 350,
      baseheight: 0,
      maxHeight: 1000,
      carouselList: [],
      baseApi: process.env.VUE_APP_BASE_API,
    };
  },
  created() {
    this.getList();
    this.baseheight = document.body.clientHeight;
  },
  methods: {
    getList() {
      listCarousel().then((res) => {
        this.carouselList = res.rows;
        console.log(this.carouselList);
      });
    },
  },
};
</script>

<style lang='scss' scoped>
::v-deep .el-carousel__indicators--outside {
  background-color: black;
}
.nsw-container {
  min-width: 1245px;
  min-height: 350px;
  .carousel-container {
    position: relative;
    ::v-deep .el-carousel__container {
    }
  }
  .carousel-operation {
    z-index: 2;
    position: absolute;
    width: 100%;
    bottom: 0;
    .operation-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100px;
      background-color: rgba(0, 0, 0, 0.7);
      color: #d0d1ce;
      .menu {
        letter-spacing: 1px;
        .menu-text {
          margin-right: 10px;
          font: {
            weight: bold;
            size: 24px;
          }
          .number {
            margin: 0 5px;
            font-size: 32px;
          }
        }
        i {
          margin-right: 10px;
        }
        .operation-btn {
          background-color: yellow;
          font-weight: bold;
          font-size: 24px;
          color: black;
          border: none;
          width: 150px;
          height: 45px;
          border-radius: 10px;
          transition: 0.3s ease-in-out;
          &:hover {
            background-color: black;
            color: yellow;
            border: 1px solid black;
          }
        }
      }
    }
  }
}
img {
  width: 100%;
  height: 100%;
}
</style>
